<template>
  <div class="cmscomen platformMana">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">平台管理</span>
      </div>
      <div class="formInfo">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          align="right"
          unlink-panels
          @change="dateChange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-select v-model="customer_items.model_value" :placeholder="customer_items.placeHolder" clearable @change="selectProInfo" filterable>
          <el-option
            v-for="item in customer_items.options"
            :key="item.platformId"
            :label="item.platformName"
            :value="item.platformId">
          </el-option>
        </el-select>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary" @click="importData">导出数据</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData"
                border
                stripe
                style="width: 100%"
            >
                <el-table-column
                    v-for="c in table_column"
                    :key="c.prop"
                    :fixed="c.fixed"
                    :sortable="c.sortable"
                    :prop="c.prop"
                    :label="c.label"
                    :formatter="c.format"
                    min-width="100"
                    v-if="c.visible">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="100"
                    align="center"
                    class-name="exitBut">
                    <template slot-scope="scope">
                        <div>
                            <el-tooltip class="item" effect="dark" content="充值" placement="top">
                                <el-button style="padding:3px 3px" type="primary" class="inlineBox icon iconfont icon-chongzhi" circle  @click.stop="recharge(scope.row.platformName,scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="明细" placement="top">
                                <el-button style="padding:3px 3px" type="info" class="inlineBox icon iconfont icon-mingxitiaozhang" circle  @click.stop="seeDetail(scope.row.time,scope.row.id)"></el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page.currentPage"
              :page-sizes="page.sizes"
              :page-size="page.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name:'accountData',
  data(){
    return {
        loading: false,
        detailStatus: false,
        examineStatus: false,
        visibleMenuSelectStatus: false,
        checkedCities: ['日期', '平台名称', '余额', '今日消耗'],
        cities: ['日期', '平台名称', '余额', '今日消耗'],
        citiesFilterVal: ['time', 'platformName', 'amount', 'yesterdayConsume', 'todayConsume', 'totalConsume'],
        table_column: [
            { fixed: false, prop: 'time', label: '日期', sortable: true, visible: true },
            { fixed: false, prop: 'platformName', label: '平台名称', sortable: false, visible: true },
            { fixed: false, prop: 'amount', label: '余额', sortable: false, visible: true },
            { fixed: false, prop: 'todayConsume', label: '今日消耗', sortable: false, visible: true },
        ],
        detailDataCol: [
            { fixed: false, prop: 'time', label: '日期', sortable: true, visible: true },
            { fixed: false, prop: 'productName', label: '产品', sortable: false, visible: true },
            { fixed: false, prop: 'platformName', label: '平台', sortable: false, visible: true },
            { fixed: false, prop: 'consume', label: '消耗', sortable: false, visible: true },
        ],
        page: {
            sizes: [10, 20, 50,100,200,500],
            offset: 1,
            limit: 10,
            count: 0,
            currentPage: 1,
        },
        menu_nav: ['信息流数据管理', '平台管理'
        ],
        examine_from: {
            accountId: '',
            amount: '',
            notes: '',
            platformId: ''
        },
        examineName: '',
        examinePro: '',
        accountName: '',
        tableData: [],
        detailData: [],
        dateValue: '',
        customer_items: {
            model_value: '',
            placeHolder: '全部平台',
            options: []
        },
        params: {
            stime: '',
            etime: '',
        },
        isFirstEnter:false, // 是否第一次进入，默认false
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    }
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
    // this.$nextTick(function(){
    //   console.log(document.querySelector('.el-table__header-wrapper'))
    // })
    this.customer();
    this.pageInfo();
  },
  methods:{
        cancelQuest(){
          if(typeof this.source ==='function'){
              this.source('终止请求'); //取消请求
          }
        },
        selectProInfo(){
          this.pageInfo();
        },
        /*全部平台*/
        customer () {
            this.$http({
                method: 'get',
                url: this.apiUrl.fdpPlaGetPlatformList,
            }).then(res => {
                if (res.status == 200) {
                    var data = res.data;
                    var data1 = data.unshift({ 'platformCode': '0', 'platformName': '全部平台' });
                    this.customer_items.options = data;
                } else {
                }
            }).catch(error => {
                console.log(error);
            });
        },
        /*查询表格数据*/
        pageInfo () {
            this.tableData=[];
            this.loading=true;
            const _this = this;
            this.cancelQuest(); //在请求发出前取消上一次未完成的请求
            this.$http({
                method: 'get',
                url: this.apiUrl.fdpPlatSearchPlatForm,
                params: {
                    offset: this.page.offset,
                    limit: this.page.limit,
                    id: this.customer_items.model_value,
                    stime: this.params.stime,
                    etime: this.params.etime,
                },
                cancelToken: new axios.CancelToken(function executor(c) {_this.source = c;})
            }).then(res => {
                this.loading=false;
                if (res.status = 200) {
                    console.log(res);
                    this.page.count = res.data.totalNums;
                    this.tableData = res.data.items;
                }
            }).catch(err => {
                if (axios.isCancel(err)) {
                    _this.loading=false;
                    console.log('Request canceled', err.message);
                    console.log(_this.loading)
                } else {
                    _this.loading=false;
                }
            });
        },
        /*查询详情数据*/
        detailInfo (time, id) {
            this.$http({
                method: 'get',
                url: this.apiUrl.fdpPlatGetPlatDetial,
                params: {
                    time: time,
                    id: id,
                }
            }).then(res => {
                if (res.status = 200) {
                    this.detailData = res.data;
                }
            }).catch(err => {
            });
        },
        /*充值*/
        recharge (name, id) {
            this.examineStatus = true;
            this.examinePro = name;
            this.examine_from.platformId = id;
        },
        /*页码翻页*/
        handleCurrentChange (val) {
            this.page.offset = val;
            this.pageInfo();
        },
        /*改变每页条数*/
        handleSizeChange (val) {
            this.page.limit = val;
            this.pageInfo();
        },
        seeDetail (time, id) {
            this.detailStatus = true;
            this.detailInfo(time, id);
        },
        exit () {
            this.detailStatus = this.examineStatus = false;
        },
        /*body事件*/
        bodyEvent () {
            this.visibleMenuSelectStatus = this.detailStatus = this.examineStatus = false;
        },
        /*改变时间选择器*/
        dateChange () {
          if (this.dateValue != '' && typeof this.dateValue != 'undefined' && this.dateValue[0] != null && this.dateValue[1] != null) {
              this.params.stime = this.formatDateTime(this.dateValue[0], 'ymd');
              this.params.etime = this.formatDateTime(this.dateValue[1], 'ymd');
              this.pageInfo();
          } else {
              this.params.stime =this.params.etime = '';
          }
        },
        /*导出*/
        importData () {
            if (this.tableData.length == 0) {
                this.$message({
                    type: 'info',
                    message: '请查询数据'
                });
                return false;
            }
            let tHeader = this.cities;
            let filterVal = this.citiesFilterVal;
            let importData = this.tableData;
            let fileName = [this.params.stime, this.params.etime, this.customer_items.model_value, '平台信息'].join('_');
            this.handleDownload(tHeader, filterVal, importData, fileName);
        },
        /*充值审批*/
        onSubmit () {
            if (this.examine_from.amount == '') {
                this.$message({
                    type: 'info',
                    message: '请输入充值金额'
                });
                return false;
            } else if (this.examine_from.amount <= 0) {
                this.$message({
                    type: 'info',
                    message: '充值金额必须大于0'
                });
                return false;
            }
            this.$http({
                method: 'post',
                url: this.apiUrl.fdpPlatPlatFormDeposit,
                data: this.examine_from,
            }).then(res => {
                if (res.status == 200) {
                    console.log(res);
                    var data = res.data;
                    this.$message({
                        type: 'success',
                        message: '充值成功'
                    });
                    this.examineStatus = false;
                    this.examine_from.amount = '';
                    this.examine_from.notes = '';
                    // this.pageInfo();
                } else {
                    this.$message({
                        type: 'error',
                        message: '充值失败，请重新提交'
                    });
                }
            }).catch(error => {
                console.log(error);
                this.$message({
                    type: 'error',
                    message: '请重新提交'
                });
            });
        }
  }
}
</script>
<style>
.platformMana .infoTable{
  width: 100%;
}
</style>

